<template>
	<div :style="{height:height,width:width}" ref="myEchart">
	</div>
</template>
<script>
	import echarts from 'echarts'
	import {
		listgroupbyname
	} from '@/api/service.js'
	export default {
		props: {
			className: {
				// type: String,
				// default: 'n'
			},
			id: {
				// type: String,
				// default: 'yourID'
			},
			width: {
				type: String,
				default: '600px'
			},
			height: {
				type: String,
				default: '600px'
			}
		},
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			this.initChart();
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose();
			this.chart = null;
		},
		methods: {
			async initChart() {
				this.chart = echarts.init(this.$refs.myEchart);
				await listgroupbyname()
					.then((response => {
						// 把配置和数据放这里
						this.chart.setOption({
							title: {
								text: '产品服务统计',
								textAlign: 'center',
								// subtext: '总计 ' + 9000,
								x: '75%',
								// y: '75%',

							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							series: [{
								name: '产品服务',
								type: 'pie',
								radius: [0, '60%'],
								// center: ['60%', '60%'],
								data: response.data
							}]
						})
					}))
			}
		}
	}
</script>

<style>
</style>
